import { useEffect } from "react";
import { View } from "@tarojs/components";
import SwiperBox from "@/components/Swiper/swiper";
import CommodityCard from "@/components/commodity-card/commodityCard";
import "./tabView.less";
import Img1 from "@/assets/5b7a22e1Nfd6ba344.jpg";
import Img2 from "@/assets/89dd1764797acfd9.jpg";
import Img3 from "@/assets/d93064343eb12276.jpg";

export default function TabView(props) {
    const { tab, phoneList } = props;
    useEffect(() => {

    }, []);

    const swiperList = [
        { id: '1', content: 'Slide 1', img: Img1 },
        { id: '2', content: 'Slide 2', img: Img2 },
        { id: '3', content: 'Slide 3', img: Img3 }
    ];

    const iconButtonList = [
        { id: '1', icon: "image", onClick: () => console.log("Button 1 clicked") },
        { id: '2', icon: "camera", onClick: () => console.log("Button 2 clicked") },
        { id: '3', icon: "video", onClick: () => console.log("Button 3 clicked") },
        { id: '4', icon: "file-code", onClick: () => console.log("Button 4 clicked") },
        { id: '5', icon: "sound", onClick: () => console.log("Button 5 clicked") },
        { id: '6', icon: "shopping-cart", onClick: () => console.log("Button 6 clicked") },
        { id: '7', icon: "mail", onClick: () => console.log("Button 7 clicked") },
        { id: '8', icon: "sound", onClick: () => console.log("Button 5 clicked") },
        { id: '9', icon: "shopping-cart", onClick: () => console.log("Button 6 clicked") },
        { id: '10', icon: "mail", onClick: () => console.log("Button 7 clicked") }
    ];
    return (
        <View className="content">
            {
                tab.id !== '1' && <View>
                    {tab.title}的内容
                </View>
            }
            {
                tab.id === '1' && <View>
                    <SwiperBox swiperList={swiperList} type="image" />
                    <SwiperBox swiperList={iconButtonList} type="button" />
                    <View className="commodity-card-box">
                        {
                            [...phoneList, ...phoneList].map((phone, index) => (
                                <CommodityCard key={index} imageUrl={phone.imageUrl} title={phone.title} price={phone.price} />
                            ))
                        }
                    </View>
                </View>
            }
        </View>
    );
}
